﻿<div>
    <h2>Better List</h2>
    <div class="well liveExample">
        <form data-bind="submit: addItem">
            <label>Add item:</label>
            <div class="input-append">
                <input class="span3" data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' />
                <button class="btn"  type="submit" data-bind="enable: itemToAdd().length > 0">Add</button>
            </div>
            <br />
            <div>
                <p>Your values:</p>
                <select class="span3" multiple="multiple" size="6" data-bind="options: allItems, selectedOptions: selectedItems"></select>
            </div> 
            <div class="span2">
                <div class="pull-right">
                    <button class="btn"  data-bind="click: removeSelected, enable: selectedItems().length > 0">Remove</button>
                    <button class="btn"  data-bind="click: sortItems, enable: allItems().length > 1">Sort</button>
                </div>
            </div>
        </form>
    </div>
</div>